<template>
  <div class="bgc_white detail" v-loading="loading" :class="{'scroll': scrollClass}">
    <div class="basicData" >
      <div class="guide">
        <p class="breadcrumb">
          <span @click="goTo(product.first_type)">{{product.first_type}} > </span>
          <span @click="goTo(product.second_type)" class="second">{{product.second_type}}</span>
          <span  class="title"> > {{product.title}}</span>
        </p>
        <div class="productImage" :style="'background-image: url('+product.curSpec.httpImage+')'"  ></div>
      </div>
      <div class="basic">
        <p class="subTitle" v-if="product.curSpec.sku"> {{product.curSpec.sku}}</p>
        <p class="title">{{product.title}}</p>
        <div class="comment"  @click="scrollToModule(2, 'reviews', 32)">
          <el-rate v-model="product.star_comment" disabled show-score :score-template="product.all_comment_num + ' '+$t('DEFAULT.REVIEWS')" :colors="rateArray"></el-rate>
        </div>
        <p class="subTitle commentContent">{{product.description}}</p>
        <p class="category">{{$t('DEFAULT.COLOR')}}</p>
        <div class="colorList" >
          <p  class="color" v-for="(spec, specItem) in product.color" :key="specItem"   
          :class="{'color_active': spec == product.curSpec.color, 'color_disabled': !colorToSize(product, spec)}" 
          :style="'background-color:' + spec" @click="changeColor(product,spec)">
            <img :src="shadowImg"  class="svgHover icon-shade" v-show="!colorToSize(product, spec)">
          </p>
        </div>
        <p class="category">{{$t('DEFAULT.SPECIFICATIONS')}}</p>
        
        <div class="specList">
          <p class="spec" :class="{'spec_active': spec == product.curSpec.specification_name, 'diabled' : !sizeToColor(product, spec) }" 
             v-for="(spec, specItem) in product.specification" :key="specItem"  @click="changeSpec(product, spec)">{{spec}} </p>
          <p class="clearBoth"></p>
        </div>
        <div class="input_container" v-if="product.import && product.import.length > 0">
          <p v-if="product.product_import_export_type == 1">Input<i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
          <p v-else>Male<i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
          <div class="container">
            <div v-for="item in product.import" :key="item.product_id"  
            @click.stop="getRelationProduct(item.import_name, product.export_name)"
            :class="{'active': import_name == item.import_name, 'disabled': !item.isCanChoose, 'inputItem' : true}">
              <div class="layer"></div>
              <el-image :src="item.import_image"></el-image>
              <p>{{item.import_name}}</p>
            </div>
          </div>

        </div>
        <div class="output_container" v-if="product.export && product.export.length > 0">
          <p v-if="product.product_import_export_type == 1">Output<i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i> </p>
          <p v-else>Female <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
          <div class="container">
            <div v-for="item in product.export" :key="item.product_id" 
            @click.stop="getRelationProduct(product.import_name, item.export_name)"
            :class="{'disabled': !item.isCanChoose, 'active': export_name == item.export_name,  'outputItem' : true}">
              <el-image :src="item.export_image"></el-image>
              <p>{{item.export_name}}</p>
            </div>
          </div>


        </div>
        <div class="material_name" v-show="product.material_name">
          <p class="category ">Material</p>
          <el-button >{{product.material_name}}</el-button>
        </div>
       
        <div class="product_detail_btn">
          <i class="iconfont icon-Share_actived" @click="isShareDialogShow"></i>
          <el-button type="search" v-if="product.curSpec.amazon_buy_link" @click="openLink(product.curSpec.amazon_buy_link)">{{$t('DEFAULT.BUYONAMAZON')}}</el-button>
          <el-button v-else>{{$t('DEFAULT.NOSALES')}}</el-button>
        </div>
      </div>
    </div>
    <div class="extendData">
      <div class="productDetail" > 
        <div class="category">
          <p :class="{'active':isGallery  === 1}" @click.stop="scrollToModule(1, 'gallery', 32)" v-show="isGalleryExit">{{$t('DEFAULT.GALLERY')}}</p>
          <p :class="{'active':isGallery === 2}"  @click.stop="scrollToModule(2, 'reviews', 32)"  v-show="isCommentExit">{{$t('DEFAULT.REVIEWS')}}</p>
          <p :class="{'active':isGallery === 3}"  @click.stop="scrollToModule(3, 'directions', 0)" v-show="instructionsDetails" > Directions</p>
          <p :class="{'active':isGallery === 4}" @click.stop="scrollToModule(4, 'recommendation', 32)" > Recommendation</p>
        </div>
        <div class="product_info">
          <p class="product_info_image" :style="'background-image: url('+product.curSpec.httpImage+')'"></p>
          <div class="product_info_title">
            <p class="title">{{product.title}}</p>
            <div class="comment"  @click="scrollToModule(2, 'reviews', 32)">
              <el-rate v-model="product.star_comment" disabled show-score :score-template="product.all_comment_num + ' '+$t('DEFAULT.REVIEWS')" :colors="rateArray"></el-rate>
            </div>
          </div>
          <el-button type="search" v-if="product.curSpec.amazon_buy_link" @click="openLink(product.curSpec.amazon_buy_link)">{{$t('DEFAULT.BUYONAMAZON')}}</el-button>
          <el-button v-else>{{$t('DEFAULT.NOSALES')}}</el-button>
       

        </div>
   

      </div>
    </div> 
    <div class="gallery" id="gallery" v-show="isGalleryExit">
      <div  v-for="(child, childI) in product.gallery"  :key="childI" class="gallery_container"  >
        <div :class="[child.image_style] " >
          <div v-for="(childSec, childSecI ) in child.data" :key="childSecI" class="" >
            <div class="el-image" :style="'background-image: url(/file'+childSec.image+')'"  ></div>
            <div class="inputWord">
              <p class="title">{{childSec.title}}</p>
              <p class="description">{{childSec.description}}</p>
            </div>
      
          </div>
        </div>
      </div>
  
    </div>
    <!-- 评论 -->

    <div  v-loading="commentLoading" id="reviews"  >
      <div class="reviews" :class="{'scrollReviews': scrollReviews}" >
        <div class="commentList pcShow" v-if="isCommentExit">
          <div class="comment_total">
            <span>Reviews({{comment_total}})</span>
            <el-rate v-model="product.star_comment" disabled :colors="rateArray"></el-rate>

          </div>
          <div class="commentItem" v-for="(item, index) in commentList" :key="index">
            <div class="comment_rate_name">
              <span class="name">{{item.comment_username}}</span>
              <el-rate v-model="item.comment_star" disabled :colors="rateArray"></el-rate>
            </div>
            <p class="commentTitle">{{item.comment_title}}</p>
            <p class="commentContent">{{item.comment_content}}</p>
            <div class="imageList" v-show="item.httpImage">
              <el-image v-for="(image, index) in item.httpImage" :key="index" :src="image" :preview-src-list="item.httpImage"></el-image>
              <p class="clearBoth"></p>
            </div>
            <p class="comment_attributes_time"><span>{{item.attributes}}</span><span>{{item.comment_time}}</span> </p>
          </div>
          <el-pagination v-show="!isPhone && comment_total > 1" style="text-align: right;"  ref="pagination"  :pager-count="pagercount"
          :page-size="comment_page_size" :total="comment_total" layout="prev, pager, next, jumper" 
          :current-page="comment_page" @current-change="handleCurrentChange"></el-pagination>
          <div class="btn_more" v-show="isPhone">  <el-button  type="search" @click="getMoreComment">More</el-button></div>
        
        </div>
        <div class="commentList phoneShow" v-if="isCommentExit" >
          <div class="comment_total">
            <p>
              <span>Reviews({{comment_total}})</span>
              <el-rate v-model="product.star_comment" disabled :colors="rateArray"></el-rate>
            </p>
            <p @click="goToCommentDetail">Read All<i class="iconfont icon-arrow_black"></i></p>
          
          </div>
          <div class="commentItem" v-if="commentList">
            <div class="comment_rate_name">
              <span class="name">{{commentList[0].comment_username}}</span>
              <el-rate v-model="commentList[0].comment_star" disabled :colors="rateArray"></el-rate>
            </div>
            <p class="comment_attributes_time"><span>{{commentList[0].attributes}}</span><span>{{commentList[0].comment_time}}</span> </p>
            <div class="comment_title_content" >
              <div>
                <p class="commentTitle">{{commentList[0].comment_title}}</p>
                <p class="commentContent">{{commentList[0].comment_content}}</p>
              </div>

            </div>
            <div v-if="commentList[0].httpImage&& commentList[0].httpImage.length> 0" class="image_container">
              <p class="image" :style="'background-image: url(/file'+img+')'" v-for="img in commentList[0].httpImage" :key="img" ></p>
            </div>

          </div>
        
      
        </div>
      </div>
    </div>
    <!-- 说明书 -->
    <div id="directions" v-show="instructionsDetails">
      <p>{{instructionsDetails.instructions_title}}</p>
      <div>
        <p>Connection diagram <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
        <el-image :src="instructionsDetails.connection_diagram"></el-image>
      </div>
      <div>
        <p>Compatibility information <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
        <div >{{instructionsDetails.compatible_information}}</div>
      </div>
      <div>
        <p>Tips <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
        <div>{{instructionsDetails.prompt}} </div>
      </div>
      <div>
        <p>Product parameters <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
        <div>{{instructionsDetails.product_parameters}}</div>
      </div>
      <div>
        <p>Attention <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
        <div>{{instructionsDetails.matters_needing_attention}}</div>
      </div>
      <div>
        <p>Troubleshooting <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
        <div>{{instructionsDetails.troubleshooting}}</div>
      </div>
      <div>
        <p>Technical Support <i class="iconfont icon-arrow_black" @click="setContentShow($event)"></i></p>
        <div>
          <a  @click="openInstructionsLink(instructionsDetails.technical_support)">{{instructionsDetails.technical_support}}</a>
          </div>
      </div>
    </div>
    <!-- 推荐 -->
    <div id="recommendation" v-show="product.recommendationData">
      <p>Recommendation</p>
      <div  class="productContent" v-if="product.recommendationData">
        <ProductItem :list="product.recommendationData" ></ProductItem>
      </div>
      <swiper :options="swiper_recommendationData" ref="mySwiper" >
        <swiper-slide class="productItem" v-for="(item, index) in product.recommendationData" :key="index"  @click="goToDetail(item)">
          <!-- <el-image :src="item.curSpec.httpImage" v-if="item.curSpec && item.curSpec.httpImage"></el-image> 
          <p class="title" @click="goToDetail(item)">{{item.title}}</p>
          <div class="colorList " v-if="item.color.length > 0" >
            <p  class="color" v-for="(spec, specItem) in item.color" :key="specItem"   
            :class="{'color_active': spec == item.curSpec.color, 'color_disabled': !colorToSize(item,spec)}" 
            :style="'background-color:' + spec" @click.stop="changeColor(item, spec)">
              <img :src="shadowImg" :lazy="true" class="svgHover icon-shade" v-show="!colorToSize(item,spec)">
            </p>
            <p class="clearBoth"></p>
            </div>
          <div class="specList"  v-if="item.specification.length > 0">
            <p class="spec" :class="{'spec_active': spec == item.curSpec.specification_name, 'diabled' : !sizeToColor(item, spec) }" 
            v-for="(spec, specItem) in item.specification" :key="specItem"  @click.stop="changeSpec(item, spec)">{{spec}} </p>
            <p class="clearBoth"></p>
            </div>
          <div class="comment"><el-rate v-model="item.star_comment" disabled show-score :score-template="item.all_comment_num +' reviews'" :colors="rateArray"></el-rate></div>

          <p class="tag" v-if="item.tag_type">{{item.tag_type}}</p> -->

          <div class="product_image" :style="'background-image:url('+item.curSpec.httpImage+')'" v-if="item.curSpec">
            <div class="switch_container" >
              <span @click.stop="prevImage(item)">
                <i class="iconfont icon-arrow_1_1"></i>
              </span>
              <span  @click.stop="nextImage(item)">
                <i class="iconfont icon-arrow_1_1"></i>
              </span>
            </div>
          </div>

          <div class="productItem_content">   
            <div class="comment"><el-rate v-model="item.star_comment" disabled show-score :score-template="item.all_comment_num +' reviews'" :colors="rateArray"></el-rate></div>
            <div class="colorList " v-if="item.color.length > 0" >
              <p  class="color" v-for="(spec, specItem) in item.color" :key="specItem"   
              :class="{'color_active': spec == item.curSpec.color, 'color_disabled': !colorToSize(item,spec)}" 
              :style="'background-color:' + spec" @click.stop="changeColor(item, spec)">
                <img :src="shadowImg" :lazy="true" class="svgHover icon-shade" v-show="!colorToSize(item,spec)">
              </p>
            </div>
          </div>

          <div class="specList"  v-if="item.specification.length > 0">
            <p class="spec" :class="{'spec_active': spec == item.curSpec.specification_name, 'diabled' : !sizeToColor(item, spec) }" 
            v-for="(spec, specItem) in item.specification" :key="specItem"  @click.stop="changeSpec(item, spec)">{{spec}} </p>
            </div> {{item.tag_type}}
          <p class="title">{{item.title}}</p>
          <p class="tag" v-if="item.tag_type">{{item.tag_type}}</p> 
            <!-- 自定义内容 -->
          <slot v-bind:item="item"> </slot> 
        
          <p class="collect"></p>
        </swiper-slide>
      </swiper>
    </div>
    <ShareDialog v-show="isShare" :show="isShare" @closeDialog="isShareDialogShow" :product="product"></ShareDialog>
    <!-- pc端分享按钮 -->
    <div class="module_share">
      <a  @click="OpenConcat(icon)" class="svgIcon" :title="icon.word" v-for="icon in iconLink" :key="icon.icon">
        <svg class="svgNormal" >
          <use :xlink:href="'#'+icon.icon"></use>
        </svg>
        <svg class="svgHover" >
          <use :xlink:href="'#'+icon.iconHover"></use>
        </svg>
      </a>
    </div>
    
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { productDetailList, productCommentList, productInstructions, importExportClick }  from '@/api/product.js'
import { timeFormat } from '@/utils/index.js'
import { productAmazonButtonClickFunc, productShareNumFunc } from '@/utils/kanban.js'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import ProductItem from '@/components/productItem'
import { ShareDialog} from './components'
export default {
  data () {
    return {
      reviews_height: null,
      rateArray: ['#FEBD69', '#FEBD69', '#FEBD69'],
      color_active: false,
      product: {
        curSpec: {
          httpImage:''
        },
        gallery: []
      },
      loading: false,
      commentLoading: false,
      curGallery:{},
      curGalleryIndex: 0,
      galleryChange: false,
      value: 4.6,
      comment_total: 0,
      comment_page: 1,
      comment_page_size: 10,
      comment_star: '',
      starList:[
        {value: '', label: 'All stars'},
        {value: '5', label: '5 star only'},
        {value: '4', label: '4 star only'},
        {value: '3', label: '3 star only'},
        {value: '2', label: '2 star only'},
        {value: '1', label: '1 star only'},
      ],
      commentList: [],
      scrollClass: false,
      url: window.location.href,
      isGallery: 0,
      iconLink: [
        {icon:'icon-Facebook1_normal', iconHover: 'icon-Facebook1_hover', word:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u='},
        // {icon:'icon-Instagram_normal_2', iconHover: 'icon-Instagram_hover_2',url:''},
        {icon:'icon-Twitter1_normal', iconHover: 'icon-Twitter1_hover', word:'Share on Twitter', url:'https://twitter.com/intent/tweet?text=' },
        {icon:'icon-Message1_normal', iconHover: 'icon-Message1_hover', word:'Share on Email', url:'mailto:?subject='},
        {icon:'icon-Link1_normal', iconHover: 'icon-Link1_hover', word:'Copy Link to Clipboard', url:'copy'},
        {icon:'icon-Top1_normal', iconHover: 'icon-Top1_hover', word:'', url:''}
      
      ],
      shadowImg: require('@/assets/shade.svg'),
      galleryBtnShow: true,
      pagercount: 7,
      instructionsDetails: '', //说明书详情
      import_name: '',
      export_name: '',
      swiper_recommendationData: {
        loop: true,//是否循环
        slidesPerView: 1.2,//一排显示几个
        spaceBetween: 16, //间隔
      },
      isShare:  false, // 分享按钮

    }
  },
  components: { Swiper, SwiperSlide, ProductItem, ShareDialog },
  computed: {
    isGalleryExit: function() { // 是否有图文
      return this.product.gallery && this.product.gallery.length > 0
    },
    isCommentExit: function() { // 是否有评论
      return this.commentList && this.commentList.length > 0
    },
    nextClass(){
      return function(index){
        let len = this.product.gallery.length - 1
        if (this.curGalleryIndex == len){
          return 0 == index
        } else {
          return this.curGalleryIndex + 1 == index
        }
       
      }
    },
    prevClass () {
      return function(index){
        let len = this.product.gallery.length - 1
        if (this.curGalleryIndex == 0){
          return len == index
        } else {
          return this.curGalleryIndex - 1 == index
        }
       
      }
    },
    isNum () {
      let num = 2
      let galleryLen = this.product.gallery.length > 0
      let commentLen = this.commentList.length > 0 
     
      if (!galleryLen && !commentLen){
        num = 0
      }else if (galleryLen || commentLen){
        num = 1
      }
      if (galleryLen && commentLen){
        num = 2
      }
      return num

      
    },
      ...mapGetters(['menuArray', 'curSite', 'isPhone']),
     menu(){
      let list = this.menuArray
      let array = []
      if(list){
        for(let i =0 ;i < list.length; i++) {
          if(list[i].path == '/products'){
            let arrayList = list[i].children
            array = arrayList
          }
        }
      }
      return array
    },
  },
  watch: {
    curSite () {
      this.getProductDetailList()
    },
    $route:function(){
      this.getProductDetailList()
    }
  },

  mounted() {
    if(this.curSite.id){
      this.getProductDetailList()
    } 
    // window.addEventListener("scroll", this.debounce(this.windowSroll, 100)) //调用防抖函数 滚动结束时触发位置计算
    // window.addEventListener("scroll", this.debounce(this.setAnimation, 10))
    // window.addEventListener("scroll", this.scrollFun)
  },
  destroyed(){
    //  window.removeEventListener("scroll", this.debounce(this.windowSroll, 100))
    //  window.removeEventListener("scroll", this.debounce(this.setAnimation, 10))
    //  window.removeEventListener("scroll", this.scrollFun)
  },

  methods:{
    setContentShow(e){
      let className = e.currentTarget.parentElement.parentElement.className
      if(className.indexOf("show") > 0){
        className = className.replace('show', ' ')
      } else {
        className += ' show'
      }
      e.currentTarget.parentElement.parentElement.className = className
      console.log(e, e.currentTarget.parentElement.parentElement.className)
    },
    isShareDialogShow (){ // 分享弹窗
      this.isShare = !this.isShare
    },
    goToCommentDetail(){ //评论列表页
      this.$router.push({ 
        path: "/comment/"+this.product.product_model_name, 
        query: { 
          'amazon_buy_link': this.product.curSpec.amazon_buy_link,
          'title': this.product.title
          }
        })
    },
    getRelationProduct (import_name, export_name ) { // 改变input output 获取对应规则的产品
    if(import_name !== this.product.import_name || export_name !== this.product.export_name){
      let params = {
        site_id: this.curSite.id,
        import_name: import_name,
        export_name: export_name,
        product_import_export_type: this.product.product_import_export_type,
        first_product_id: this.product.first_product_id,
        second_product_id: this.product.second_product_id,
        material_product_id: this.product.material_product_id
      }
      importExportClick(params).then(res=>{
        let data = res.data
        if(data.set_link){
          this.goToDetail(res.data)
        }
      })
    }

    },
    windowSroll () { //监听滚动事件 
      // let scrollTop = document.getElementsByClassName("rampow_content ")[0].scrollTop
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let reviews = document.querySelector("#reviews").offsetTop;
      let directions = document.getElementById("directions").offsetTop
      let recommendation = document.getElementById("recommendation").offsetTop
      if(reviews && directions && recommendation ){
        if (scrollTop < reviews- 200) {
          this.isGallery = 1
        } else if(scrollTop < directions- 200) {
          this.isGallery = 2
        } else if(scrollTop < recommendation- 200){
          this.isGallery = 3
        } else {
          this.isGallery = 4
        }
      } else if(reviews && recommendation ){
         if (scrollTop < reviews- 200) {
          this.isGallery = 1
        } else if(scrollTop < recommendation- 200){
          this.isGallery = 2
        } else {
          this.isGallery = 4
        }
       }
   
    },
    scrollFun() { // extendData模块滚动时检测位置固定
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let height =  document.getElementsByClassName("basicData")[0].offsetHeight
      let className =  document.getElementsByClassName("rampow_content ")[0].className
      if(!this.isPhone){
        height += 80
      }
      if(scrollTop > height){
        this.scrollClass = true
        if(className.indexOf("isFixedChild") == -1){
          document.getElementsByClassName("rampow_content ")[0].className = 'rampow_content  isFixedChild'
        }
      } else {
        this.scrollClass = false
        if(className.indexOf("isFixedChild") > -1){
         document.getElementsByClassName("rampow_content ")[0].className = 'rampow_content'
        }
      }
     
    },
    debounce(fn, delay) {
      let time = false //第一次进来time为false，走else
      return function(){
        if (time) {
          clearTimeout(time) //滚动条在不断的滚动，我们不断的清除定时器（重新初始化定时器，在重新设置定时器）
          time = setTimeout(fn, delay) //又重新设置定时器，
        } else {
          time = setTimeout(fn, delay) //进来第一次先进入这里，然后time被赋值 != false,如果滚动条在继续滚动，接着马上进入time == true中
        }
      }
    },
    setAnimation: function() {
      let productItem = document.getElementsByClassName("gallery_container")
      const h = document.documentElement.clientHeight || document.body.clientHeight
      for(let i = 0 ; i < productItem.length; i ++ ){
        (function(i) {
          const { top , bottom} = productItem[i].getBoundingClientRect()
          if (top < h) {
            let index = productItem[i].className.indexOf('visible') > 0
            if(!index){
              productItem[i].className =  productItem[i].className + ' '+ 'visible'
            }
          } else if(bottom > h) {
            let index = productItem[i].className.indexOf('visible') > 0
            if(index){
              productItem[i].className = productItem[i].className.replace('visible', '')
            }

          }
        })(i)
      }
    },
    openInstructionsLink (link){
      let hostname = window.location.hostname
      let isCurWebsite = link.indexOf(hostname) > -1
      if(isCurWebsite) {
        window.location.href = link
      } else {
        if(link.indexOf('http')> -1){
          window.open(link)
        } else {
            window.open('https://' +link)
        }
      }
    },
    changeImportExport(){//import选中
      let import_name = this.product.import_name
      if(import_name){
        let exportList = this.product.export
        let importExportList = this.product.import_export_list
        let outputNameList  = []
        for(let i = 0; i < importExportList.length; i ++ ){
          let item_import_name = importExportList[i].input_name || importExportList[i].male_name
          if(import_name === item_import_name){
            let item_export_name = importExportList[i].output_name || importExportList[i].female_name
            outputNameList.push(item_export_name)
          }
        }
        for(let j = 0; j < exportList.length; j++){
          let isCanChoose = outputNameList.indexOf(exportList[j].export_name) > -1
          exportList[j].isCanChoose = isCanChoose
        }
        this.$set(this.product, 'export', exportList)
      }
   

    },
    changeExportImport(){//export选中
      let export_name = this.product.export_name
      if(export_name){
        let importList = this.product.import
        let importExportList = this.product.import_export_list
        let inputNameList = [] 
        for(let i = 0; i < importExportList.length; i ++ ){
          let item_export_name = importExportList[i].output_name || importExportList[i].female_name
          if(export_name === item_export_name){
            let item_import_name = importExportList[i].input_name || importExportList[i].male_name
            inputNameList.push(item_import_name)
          }
        }
        for(let j = 0; j < importList.length; j++){
          let isCanChoose = inputNameList.indexOf(importList[j].import_name) > -1
          importList[j].isCanChoose = isCanChoose
        }
        this.$set(this.product, 'import', importList)
      }
   

    },

    getProductInstructions(){ //获取说明书
      let instructions_product_id = this.product.instructions_product_id
      if(instructions_product_id){
        let params = {
          site_id: this.curSite.id,
          instructions_product_id: instructions_product_id
        }
        productInstructions(params).then(res=>{
          this.instructionsDetails = res.data[0]
        })
      }

    },
    openLink (link) {
      let url = link
      if (url.indexOf('http')  == -1){
        url = 'http://' +link
      }
      productAmazonButtonClickFunc(this.product.product_model_name)
      window.open(url, '_blank')

    },
    scrollToModule (index, target) { // 固定栏点击滚动到指定模块
      this.isGallery = index
      let top = document.getElementById(target).offsetTop
      let navbar = document.getElementsByClassName('navbar')[0].clientHeight
      let extendData = document.getElementsByClassName('productDetail')[0].clientHeight
      let height = top - navbar - extendData
      if(!this.scrollClass){
        height -= extendData
      }
   

      window.scrollTo({
        top: height,
        left: 0,
        behavior: 'smooth'
      })
       let category =  document.getElementsByClassName('productDetail')[0].getElementsByClassName("category")[0]
       let pLen =  category.getElementsByTagName("p")
        if(pLen.length == 4 && index == 4){
          category.scrollTo({
            left: category.scrollWidth,
            behavior: 'smooth' 
          })
        } else if(index == 1){
          category.scrollTo({
            left: 0,
            behavior: 'smooth' 
          })
        }

    },
    handleCurrentChange(val) {
      this.comment_page = val
      this.getCommentList()
    },
    goTo(link){
      if(link == '/shop'){
        this.$router.push({path: '/shop'})
      } else {
        let url = ''
        let list = this.menu
        for(let i = 0; i < list.length; i++){
          if(list[i].meta.title == link ){ 
            url = list[i].path
          } else if(list[i].children && list[i].children.length> 0){
            for( let j = 0; j < list[i].children.length; j++){
              if(list[i].children[j].meta.title == link){
                url = list[i].children[j].path
              }
            }
          }
        }
        this.$router.push({path: url})
      }
    },
    OpenConcat (icon){
      let that = this
      let url = icon.url
      let location = window.location.href
      let isCopy = url.indexOf('copy') > -1
      let share_way = ''
      if(url) { // 分享按钮
        if(url.indexOf('facebook') > -1){
          url += location + '&quote=' + this.product.title
          share_way = 'Facebook'
        } else if (url.indexOf('twitter') > -1){
          url+= this.product.title + '&url=' + location
          share_way = 'Twitter'
        } else if(url.indexOf('mailto') > -1) {
          url+= this.product.title + '&body=' + location
          share_way = 'Email'
        } else if (isCopy){
          url = location
          share_way = 'Link'
        } 
        if(isCopy){
          this.$copyText(url).then(function () {
            that.$message.success('Link Copied')
          }, function () {
            that.$message.success('Link not copy')
          })
        }else {
          window.open(url)
        }
        productShareNumFunc(share_way, this.product.product_model_name)
      } else{
        // 回到顶部
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }

    },
    colorToSize (item, color){
      let data = item.data
      let m =  data.filter(d=>{
        return d.specification_name == item.curSpec.specification_name  && d.color == color
      })
      return m.length > 0
    },
    sizeToColor (item, size) {
      let data = item.data
      let m =  data.filter(d=>{
        return d.color == item.curSpec.color  && d.specification_name == size
      })
      return m.length > 0
    },
    changeColor (item, color) {
      let isExit = false
      let specData = item.data
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].color == color){
          if (item.curSpec.specification_name == specData[i].specification_name) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }
      if (!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].color == color){
            item.curSpec = specData[i];
            break;
          }
        }
      }
    },
    changeSpec (item, size){
      let specData = item.data
      let isExit =  false
      for(let i = 0; i < specData.length; i++ ){
        if(specData[i].specification_name == size){
          if (item.curSpec.color == specData[i].color) {
            item.curSpec = specData[i]
            isExit = true
          }
        }
      }

      if(!isExit) {
        for(let i = 0; i < specData.length; i++ ){
          if(specData[i].specification_name == size){
            item.curSpec = specData[i];
             break;
          }
        }
      }
    },
    prevImage (item) { // 推荐产品里的图片切换
      let lenColor = item.color.length -1
      if(item.curIndex  > 0){
        item.curIndex = item.curIndex-1
      } else {
        item.curIndex = lenColor
      }
      
      this.changeColor(item, item.color[item.curIndex])

    },
    nextImage (item){// 推荐产品里的图片切换
       let lenColor = item.color.length -1
      if(item.curIndex  < lenColor){
        item.curIndex = item.curIndex +1
      } else {
        item.curIndex = 0
      }
      this.changeColor(item, item.color[item.curIndex])
    },
    goToDetail (item){
      this.$router.push({path: '/product/' + item.set_link})
    },
    getCommentList () {
      this.commentLoading = true
       let params = {
        filter:{},
        op: {},
        page_size: this.comment_page_size,
        page: this.comment_page,
      }
      let product_model_name = this.product.product_model_name
      if(product_model_name){
        params.filter.product_model_name = product_model_name,
        params.op.product_model_name = '='
      }
      let comment_star = this.comment_star
      if(comment_star){
        params.filter.comment_star = comment_star,
        params.op.comment_star = '='
      }
      let site_id = this.curSite.id
      if(site_id){
        params.filter.site_id = site_id,
        params.op.site_id = '='
      }
      
      productCommentList(params).then(res=>{
        let list = res.data.data
        for(let i = 0; i< list.length; i++){
          list[i].comment_star = parseInt(list[i].comment_star)
        }
        if(this.isPhone && params.page > 1) {
          this.commentList = this.commentList.concat(list)
        } else {
          this.commentList = list
        }
        this.comment_total = res.data.total
        this.comment_page = res.data.current_page
        this.commentLoading = false
        this.getProductInstructions()
      })
    },
    getMoreComment() {
      if(this.commentList.length < this.comment_total  ){
        this.comment_page +=1
        this.getCommentList()
      } else {
        console.log('没有更多')
      }
    },
    getProductDetailList () {
      this.loading = true
      let set_Link = this.$route.params.id+ this.$route.hash
      let params = {
        site_id: this.curSite.id,
        set_link: set_Link,
        local_time: timeFormat(new Date()).split(' ')[0],
      }
      productDetailList(params).then(res=>{
        if ( res.state == 1){ 
          let list = res.data[0]
          
          if(list.star_comment){
            list.star_comment = parseInt(list.star_comment) || 0

          }

          let all_comment_num = list.all_comment_num 
          if(all_comment_num> 0){
            let five_star_num = parseInt((list.five_star_num / all_comment_num)*100)  
            let four_star_num = parseInt((list.four_star_num / all_comment_num) *100)  
            let three_star_num = parseInt((list.three_star_num / all_comment_num) *100)  
            let two_star_num = parseInt((list.two_star_num / all_comment_num) *100) 
            let one_star_num = 100 - five_star_num - four_star_num - three_star_num - two_star_num
          
            list.five_star_num_rate = five_star_num
            list.four_star_num_rate = four_star_num
            list.three_star_num_rate = three_star_num
            list.two_star_num_rate = two_star_num
            list.one_star_num_rate = one_star_num
          }
          
          if (list.data.length >0){
            list.curSpec = list.data[0]
          }else {
            list.curSpec = {
              httpImage:''
            }
          }
          let recommendationData = list.recommendationData
          for(let i = 0; i<recommendationData.length; i++){
            recommendationData[i].curSpec = recommendationData[i].data[0]
          }
          this.product = list
          this.export_name = list.export_name
          this.import_name = list.import_name
          this.getCommentList()
          if(list.gallery &&list.gallery.length > 0){
            this.curGallery = list.gallery[0] 
            if(list.gallery.length > 1){
              this.galleryBtnShow = false
            } else {
              this.galleryBtnShow = true
            }
          }
        }
        this.loading = false

        this.changeExportImport()
        this.changeImportExport()

      })
    },
    chooseColor () {
      this.color_active = !this.color_active
    },
    changeStar () {
      this.comment_page = 1
      this.getCommentList()
    },
    changeGallery (index) {
      this.curGallery = this.product.gallery[index]
      this.galleryChange = !this.galleryChange
      this.curGalleryIndex = index
    }
  }

}
</script>

<style lang="scss">
@import '@/styles/product/productDetails.scss';

  
</style>